<template>
 <div>
    <h1>新增保险种类</h1>
  <el-form :inline="true" :model="typedata" >
    <el-form-item label="险种名称">
      <el-input v-model="typedata.name" placeholder="新增险种"></el-input>
    </el-form-item>
   
    <el-form-item>
        <div class="ss" v-for="(item,index) in insuran" :key="index">{{item}}</div>
      <el-button type="primary" @click="onSubmit">确认新增</el-button>
      
    </el-form-item>
  </el-form>
   <el-tag class="bx" type="success" v-for="item in  type" :key="item._id" @click='insurance(item.name,item._id)'>{{item.name}}</el-tag>
 
 </div>
</template>

<script>
import { createNamespacedHelpers } from 'vuex';
const {mapActions} = createNamespacedHelpers('insurancetype')
export default {
  data() {
      return {
        typedata:{
          name:'123',
          data:[]
        },
        type:[],
        insuran:[]
      }
    },
    async created(){
       const data =  await this.getInsurance();
        this.type = data.data.data;
    },
    methods: {
      ...mapActions(['addinsurancetype']),
      ...mapActions(['getInsurance']),
      async onSubmit() {
        const data = await this.addinsurancetype(this.typedata)
        if(data.status){
          this.$message({message:'New success',type: 'success'})
          this.$router.push('/insurancelist')
        }
      },
      insurance(name,_id){
        this.insuran.push(name);
        this.typedata.data.push(_id);
        
      }
    }
};
</script>

<style>
.bx{
  width: 200px;
  height: 40px;
   line-height: 40px;
  text-align: center;
  font-size: 16px;
}
.ss{
  float: left;
  width: 60px;
  height: 40px;
  background-color: rgb(255, 255, 255);
  color: green;
  margin-left: 10px;
  border-radius: 6px;
 
  text-align: center;
}
</style>